<template>
    <div v-if="show">
        <el-pagination
            :page-sizes="pageSizes"
            :page-size="pageSize"
            :layout="layout"
            :total="total"
            :background="background"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
    </div>
</template>


<script setup>
import { toRefs } from 'vue'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    total: {
        required: true,
        type: Number
    },
    currentPage: {
        type: Number,
        default: 1
    },
    pageSizes: {
        type: Array,
        default () {
            return [20, 40, 60, 80, 100]
        }
    },
    pageSize: {
        type: Number,
        default: 20
    },
    layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
        typeof: Boolean,
        default: true
    }
})

const emits = defineEmits(['paginationHandle'])


const {show, total, pageSize, currentPage} = toRefs(props)

const handleSizeChange = (val) => {
    console.log(pageSize, val)
    emits('paginationHandle', { pageNum: currentPage, pageSize: val })
}
const handleCurrentChange = (val) => {
    console.log(pageSize.value, val)
    emits('paginationHandle', { pageNum: val, pageSize: pageSize.value })
}
</script>